<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <h2>{{person}}</h2>
    <button @click="updatePerson">点击修改</button> -->
    <script>
        let person = {
            name: '你好',
            age: 18
        }
        // Vue2响应式原理
        // let p = {}
        // Object.defineProperty(p, 'name', {
        //     // 可删除
        //     configurable: true,
        //     get () {
        //         return person.name
        //     },
        //     set (val) {
        //         console.log('修改了name')
        //         person.name = 'ajaja'
        //     }
        // })
        // Vue3响应式原理
        // let p = new Proxy(person, {})
        let p = new Proxy(person, {
            // person为源数据 p为代理数据
            get (a, b) {
                console.log('有人读取了p身上的一些属性')
                return a[b]
            },
            set (a, b, value) {
                console.log(a, b, value)
            },
            deleteProperty (a, b) {
                console.log('删除了某属性')
                delete a[b]
            }
        })
    </script>
</body>
</html>